<template>
  <div class="content">
    <img src="../../assets/bg.png" class="bg" />
    <div class="login_div">
      <div class="head">
        <div class="head_view">电子商务后台管理系统 V1.0</div>
      </div>
      <div class="form_item">
        <input type="text" placeholder="输入管理员账户" name="username" v-model="form.username" />
        <i class="el-icon-user-solid"></i>
      </div>
      <div class="form_item">
        <input type="password" placeholder="输入管理员密码" name="password" v-model="form.password" />
        <i class="el-icon-s-goods"></i>
      </div>
      <div class="code_input">
        <div class="form_item" style="width:100px">
          <input
            type="text"
            placeholder="输入验证码"
            name="code"
            style="padding:0 10px "
            v-model="form.code"
          />
        </div>
        <img class="img_code" :src="codeUrl" alt />
        <el-button type="text" v-on:click="change" size="mini">换一张</el-button>
      </div>
      <button type="button" class="login_bt" @click="submitForm">立即登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: "",
        code: ""
      },
      codeUrl: "",
      loading: false
    };
  },
  mounted() {
    this.codeUrl = this.$checkCode;
  },
  methods: {
    change() {
      this.codeUrl = this.codeUrl + "?dd=" + new Date().getTime();
    },
    submitForm() {
      if (this.form.username == "") {
        this.$message({
          message: "请输入管理账户",
          type: "warning"
        });
        return;
      }

      if (this.form.password == "") {
        this.$message({
          message: "请输入管理密码",
          type: "warning"
        });
        return;
      }

      if (this.form.code == "") {
        this.$message({
          message: "请输入验证码",
          type: "warning"
        });
        return;
      }
      this.$store
        .dispatch("Login", this.form)
        .then(() => {
          this.loading = false;
          this.$router.push({ path: this.redirect || "/" });
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped>
.bottom_text {
  color: #606266;
  font-size: 14px;
}
.bottom {
  width: 100%;
  position: absolute;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.head {
  position: relative;
  width: 100%;
  height: 0;
  justify-content: center;
}
.head_view {
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0;
  top: -100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 22px;
}
.login_bt {
  border: none;
  width: 250px;
  height: 40px;
  margin: 20px 0;
  background-color: #16a9f2;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.img_code {
  height: 30px;
  margin: 0 0 10px 20px;
}
.code_input {
  width: 250px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.form_item i {
  color: #c0c4cc;
  position: absolute;
  height: 100%;
  align-items: center;
  display: flex;
  transition: all 0.3s;
  top: 0;
  left: 5px;
}
.form_item input:hover {
  border: 1px solid #c0c4cc;
}

.form_item input:focus {
  outline-offset: -2px;
  border: 1px solid #16a9f2;
}

.form_item input::-webkit-input-placeholder {
  color: #909399;
}

.form_item input {
  width: 100%;
  height: 100%;
  padding: 0 10px 0 30px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
  color: #606266;
  outline: none;
  font-size: 14px;
  font: 400 13.3333px Arial;
}
.form_item {
  width: 250px;
  height: 40px;
  position: relative;
  margin: 10px 0;
}
.login_div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 300px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 10px 0;
  box-sizing: border-box;
}
.bg {
  width: 100%;
  height: 50%;
}
.content {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #f5f5f5;
}
</style>

